<template>
  <div class="pic"></div>
</template>

<script>
import * as echarts from "echarts";
import data from '../assets/data.json'
export default {
	data(){
		return{
			pData:data
		}
	},
  methods: {
    getPic() {
      // let ROOT_PATH = "https://echarts.apache.org/examples";

      let chartDom = document.getElementById("pic");
      let myChart = echarts.init(chartDom);
      let option;
			// let pData = data
			console.log(this.pData)
			// let pData = JSON.parse(data)
      myChart.showLoading();
      // $.get(ROOT_PATH + "/data/asset/data/flare.json", function (data) {
			myChart.hideLoading();
			myChart.setOption(
				(option = {
					tooltip: {
						trigger: "item",
						triggerOn: "mousemove",
					},
					series: [
						{
							type: "tree",
							data: [this.pData],
							top: "18%",
							bottom: "14%",
							layout: "radial",
							symbol: "emptyCircle",
							symbolSize: 7,
							initialTreeDepth: 3,
							animationDurationUpdate: 750,
							emphasis: {
								focus: "descendant",
							},
						},
					],
				})
			);
      // });
      option && myChart.setOption(option);
    },
  },
	mounted(){
		this.getPic()
	}
};
</script>

<style>
.pic {
  width: 100%;
  height: 100%;
}
</style>